JQuery

How to animate tooltip with time duration using jQuery?

How to animate tooltip with time duration using jQuery?, someone asked me to explain?
By:

We can animate tooltip by showing and hiding using property show and hide. Here we are using JavaScript object to specify the property animation duration, effect and delays.

For more details,

http://api.jqueryui.com/tooltip/

Example:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
           $(document).ready(function () {
               $('#txtJobDesc').tooltip({
                   show: { delay: 10, duration: 1000, effect: 'slideDown' },
                   hide: { delay: 10, duration: 1000, effect: 'slideUp' },
                   track:true
               });
        });
    </script>
</head>
<body>
    <div>
        <input id="txtJobDesc" type="text" title="write breif about previousjob description." />
    </div>
</body>
</html> 

Output:

animate tooltip with time duration using jQuery

Related Article

Post your comments / questions



Recent Article